<template>
  <div class="info-header">
    <h3>{{ title }}</h3>
    <div class="header-actions">
      <CollapseButton v-if="showCollapse" :collapsed="collapsed" @toggle="$emit('toggle-collapse')" />
      <el-button v-else type="text" @click="$emit('click')">
        <el-icon>
          <Menu />
        </el-icon>
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElButton, ElIcon } from 'element-plus'
import { Menu } from '@element-plus/icons-vue'
import CollapseButton from './Collapsed/CollapseButton.vue'

withDefaults(defineProps<{
  title: string
  showCollapse?: boolean
  collapsed?: boolean
}>(), {
  showCollapse: false,
  collapsed: false
})

defineEmits<{
  (e: 'click'): void
  (e: 'toggle-collapse'): void
}>()
</script>

<style scoped>
.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0 4px;
  background-color: var(--primary-bg);
  height: 36px;
}

.info-header .el-button {
  padding: 0;
  margin-left: 8px;
}

.info-header .el-icon {
  font-size: 16px;
  color: var(--text-secondary);
}

.info-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: var(--text-secondary);
}

.patient-sidebar.collapsed .info-header h3 {
  display: none !important;
  visibility: hidden !important;
  width: 0;
  height: 0;
  overflow: hidden;
}
</style>
